import React, { Component } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  DeviceEventEmitter,
  Alert
} from "react-native";
import http from "../../../util/http";
import { MEMBER_BGT, MEMBER_CURRENCY, BGT_INFO } from "../../../config/Api";
import { Memberbgt, QuotaStyles } from "../../../style/index";
import { numberToQian } from "../../../util/util";
import Spinner from "react-native-loading-spinner-overlay";
import { toast } from "../../../util/tip";

export default class MemberBgt extends Component {
  state = {
    data: {},
    curreny: [],
    isBgtShow: true,
    bgt: {}
  };

  async getMemberBgtData() {
    let data = await http.get(MEMBER_BGT);
    this.setState({ data: data.data });
  }

  async getCurrencies() {
    const data = await http.get(MEMBER_CURRENCY);
    this.setState({
      curreny: data.data
    });
  }

  async getBgt() {
    if (this.state.isLoaidng) return;
    this.setState({
      isLoaidng: true
    });
    setTimeout(() => {
      if (this.state.isLoaidng) {
        this.setState({
          isLoaidng: false
        });
        setTimeout(() => {
          Alert.alert("網絡開小差，稍後再訪問");
        }, 300);
      }
    }, 204000);
    const data = await http.get(BGT_INFO);
    console.log('data => ',data);
    this.setState({
      isLoaidng: false
    });
    if (data) {
      this.setState({
        bgt: data.data
      });
    }
  }

  refresh() {
    this.getBgt();
    this.getMemberBgtData();
    this.getCurrencies();
    DeviceEventEmitter.emit("refresh_end");
  }

  componentDidMount() {
    this.refresh();
    this.subscrition = DeviceEventEmitter.addListener("refresh", () => {
      this.refresh();
    });
    // this.getBgt();
  }

  componentWillUnmount() {
    this.subscrition.remove();
  }

  changeBgtShow() {
    this.setState({
      isBgtShow: !this.state.isBgtShow
    });
  }

  render() {
    const { data } = this.state;

    return (
      <View>
        <Spinner
          visible={this.state.isLoaidng}
          textContent="加载中..."
          textStyle={{
            color: "#fff",
            fontSize: 14,
            marginTop: -10
          }}
        />
        <View style={Memberbgt.mainContainer}>
          <View style={Memberbgt.profit}>
            <Text style={Memberbgt.h4Title}>昨日收益</Text>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center"
              }}
            >
              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate("FlowDetail", {
                    type: 2,
                    flags: 1025
                  })
                }
              >
                <Text style={Memberbgt.profitSpan}>
                  {numberToQian(
                    (data.yesterday_interest || 0) /
                      (this.state.isBgtShow
                        ? 1
                        : this.state.bgt.usdt_rate || 10)
                  )}{" "}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  this.changeBgtShow();
                }}
              >
                <Text style={[Memberbgt.profitSpan, { fontSize: 14 }]}>
                  {this.state.isBgtShow ? "BGT" : "USDT"}
                </Text>
              </TouchableOpacity>
            </View>
            <View>
              <Text style={Memberbgt.amountText}>
                总額：
                <Text style={{ fontSize: 16 }}>
                  {numberToQian(data.amount || 0)}
                </Text>{" "}
                BGT
                {/* {this.state.curreny.map(
                  (item, index) =>
                  <Text>{index !== 0 ? "≈" : ""} <Text style={{fontSize: 14}}>{item.rate * data.amount}</Text> {
                    item.currency
                  }</Text>
                )} */}
              </Text>
              {/* {data.amount} BGT ≈ {data.amount / 1000} USDT ≈ {data.amount} */}
              {/* CNY */}
            </View>
            <View>
              <Text style={Memberbgt.amountText}>
                {this.state.curreny.map((item, index) => (
                  <Text key={{ index }}>
                    {index !== 0 ? "≈" : ""}
                    {item.currency}：
                    <Text style={{ fontSize: 14 }}>
                      {numberToQian(
                        (item.rate * data.amount) /
                          (this.state.bgt.usdt_rate || 10) || 0
                      )}
                    </Text>{" "}
                  </Text>
                ))}
              </Text>
              {/* {data.amount} BGT ≈ {data.amount / 1000} USDT ≈ {data.amount} */}
              {/* CNY */}
            </View>
          </View>
        </View>

        <View style={QuotaStyles.quotaContainer}>
          <View style={QuotaStyles.quotaItem}>
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate("FlowDetail", {
                  type: 3
                })
              }
            >
              <Text style={QuotaStyles.itemTitle}>可購額度</Text>
              <Text style={QuotaStyles.itemValue}>
                {Math.floor(data.credit || 0)}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={QuotaStyles.quotaItem}>
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate("FlowDetail", {
                  type: 3
                })
              }
            >
              <Text style={QuotaStyles.itemTitle}>已購額度</Text>
              <Text style={QuotaStyles.itemValue}>
                {Math.floor(data.purchase_amount || 0)}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={QuotaStyles.quotaItem}>
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate("FlowDetail", {
                  type: 2,
                  flags: 1025
                })
              }
            >
              <Text style={QuotaStyles.itemTitle}>總收益</Text>
              <Text style={QuotaStyles.itemValue}>
                {numberToQian(data.interest_amount || 0)}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}
